<template>
  <el-dialog
    width="600px"
    class="book-upload"
    :visible.sync="visible"
    :title="optionType === 'add' ? '添加小说' : optionType === 'edit' ? '编辑小说' : ''"
    :destroy-on-close="true"
    @open="dialogOpen"
    @close="dialogClose"
  >
    <el-form
      ref="uploadForm"
      v-model="formData"
    >
      <el-form-item
        label="小说名称"
      >
        <el-input
          size="small"
          placeholder="输入小说名称"
          v-model="formData.BookName"
        />
      </el-form-item>
<!--      <el-form-item-->
<!--        label="发布时间"-->
<!--      >-->
<!--        <el-date-picker-->
<!--          size="small"-->
<!--          placeholder="选择日期"-->
<!--          v-model="formData.StartTime"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item
        label="小说类型"
      >
        <el-select
          size="small"
          placeholder="选择小说类型"
          v-model="formData.TypeID"
        >
          <el-option
            v-for="(item,index) in typeData"
            :key="index"
            :value="item.Type"
            :label="item.TypeName"/>
        </el-select>
      </el-form-item>
      <el-form-item
        label="作者"
      >
        <el-select
          size="small"
          placeholder="选择作者"
          v-model="formData.AuthorID"
        >
          <el-option
            v-for="(item,index) in authors"
            :key="index"
            :value="item.AuthorID"
            :label="item.AuthorName"/>
        </el-select>
      </el-form-item>
      <el-form-item
        label="付费类型"
      >
        <el-select
          v-model="formData.CostID"
          placeholder="选择付费类型"
          size="small"
        >
          <el-option
            v-for="(item,index) in costData"
            :key="index"
            :value="item.CostID"
            :label="item.CostName"/>
        </el-select>
      </el-form-item>
      <el-form-item
        label="小说状态"
      >
        <el-select
          size="small"
          placeholder="选择小说状态"
          v-model="formData.StatusID"
        >
          <el-option
            v-for="(item,index) in statusData"
            :key="index"
            :value="item.StatusID"
            :label="item.StatusName"/>
        </el-select>
      </el-form-item>
      <el-form-item
        label="小说封面"
      >
        <el-upload
          action="http://localhost:8001/files/upLoadImage"
          name="image"
          accept=".jpg,.jpeg,.png"
          list-type="picture-card"
          :multiple="false"
          :limit="1"
          :file-list="coverFileList"
          :on-success="coverSuccess"
          :before-upload="beforeUpload"
          :on-error="errorUpload"
        />
      </el-form-item>
      <el-form-item
        label="小说文件"
      >
        <el-upload
          action="http://localhost:8001/files/upLoadBook"
          name="book"
          accept=".txt"
          :multiple="false"
          :limit="1"
          :file-list="bookFileList"
          :on-success="bookSuccess"
          :before-upload="beforeUpload"
          :on-error="errorUpload"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item
        label="简介"
      >
        <el-input
         type="textarea"
         maxlength="255"
         rows="5"
         v-model="formData.Synopsis"
         placeholder="请输入小说简介……"
         show-word-limit
        />
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button type="primary" size="small" @click="submit">确认</el-button>
    </template>
  </el-dialog>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "BookUploadDialog",
  props:{
    optionType:{
      type:String,
      default:'add'
    },
    bookId:{
      type:Number,
    }
  },
  data(){
    return{
      formData:{},
      btnDisable:false,
      visible:false,
      coverFileList:[],
      bookFileList:[]
    }
  },
  computed:mapState({
    typeData:state => state.book.types,
    authors:state => state.book.authors,
    costData:state => state.book.costIds,
    statusData:state => state.book.status,
  }),
  methods:{
    coverSuccess(res,file,files){
      this.coverFileList = files
      console.log(res)
      if(res.state){
        this.formData.BookImg = res.data.url
      }else{
        this.$message.warning(res.message)
      }
      console.log("formData",this.formData)
      this.btnDisable = false
    },
    bookSuccess(res,file,files){
      this.bookFileList = files
      if(res.state){
        this.formData.Conetnt = res.data.url
      }else{
        this.$message.warning(res.message)
      }
      this.btnDisable = false
    },
    errorUpload(err){
      this.btnDisable = false
      this.$message.error(err)
      console.log(err)
    },
    beforeUpload(){
      this.btnDisable = true
    },
    submit(){
      console.log('submit/',this.optionType)
      if(this.optionType === 'add'){
        console.log('add')
        this.$axios.$post('http://localhost:8001/files/addBook',this.formData)
          .then(res => {
            if(res.state){
              this.$message.success(res.message)
              this.visible = false //关闭弹窗
              this.$emit('success') //触发父级的success事件
            }else{
              this.$message.error(res.message)
            }
          })
          .catch(error => {
            this.$message.error('小说信息添加失败')
            console.log(error)
          })
      }else if(this.optionType === 'edit'){
        this.$axios.$post('http://localhost:8001/files/editBook',this.formData)
          .then(res => {
            if(res.state){
              this.$message.success(res.message)
              this.visible = false //关闭弹窗
              this.$emit('success') //触发父级的success事件
            }else{
              this.$message.error(res.message)
            }
          })
          .catch(error => {
            this.$message.error('小说信息修改失败')
            console.log(error)
          })
      }
    },
    dialogOpen(){
      if(this.bookId){
        this.$axios.$get('http://localhost:8001/files/getBookById?bookId=' + this.bookId)
          .then(res => {
            this.formData = res
          })
          .catch(error => {
            this.$message.error('获取指定小说信息失败')
            console.log(error)
          })
      }
    },
    dialogClose(){
      this.formData = {} //重置表单数据对象
      this.bookFileList = []
      this.coverFileList = []
    },
    openDialog(){
      this.visible = true
    }
  }
}
</script>

<style lang="less">
.book-upload{

}
</style>
